<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html 元素练习</title>
</head>

<body>
    <header>
        <h1>html 元素练习</h1>
    </header>
    <main>
        <section>
            <h2>区块元素</h2>
            <p>段落元素<code>p</code>就是一个区块元素。</p>
            <p>段落元素p就是一个区块元素。</p>
        </section>
        <section>
            <h2>内容组织元素</h2>
            <div>
                <ol>
                    <li>列表项</li>
                    <li>列表项</li>
                    <li>列表项</li>
                </ol>
                <ul>
                    <li>列表项</li>
                    <li>列表项</li>
                    <li>列表项</li>
                </ul>
            </div>
        </section>
        <section>
            <h2>文本语义元素<br>副标题</h2>
            <p><span>作者：xxx</span> 发表日期：xxx</p>
            <p>A 元素用来表示超链接或者文档内部锚点。如果 a 元素有 <a href="http://www.baidu.com">href</a> 属性，它就表示超链接。</p>
        </section>
        <section>
            <h2>嵌入内容元素</h2>
            <img src="http://i2.sinaimg.cn/hs/15/2009/0424/U3082P651T15D100836F209DT20100504162831.JPG" alt="公教楼"
                title="公教楼" width="400">
            <p>
                <img src="images/4823942.jpg" alt="" width="400">
            </p>
            <iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=o0555dkncor" allowFullScreen="true"
                width="400" height="300"></iframe>
            <video src="../media/back.ogv" controls></video>
            <audio src="../media/Backroad.ogg" controls></audio>
        </section>
        <section>
            <h2>表格元素</h2>
            <table>
                <tr>
                    <td>单元格</td>
                    <td>单元格</td>
                    <td>单元格</td>
                </tr>
                <tr>
                    <td>单元格</td>
                    <td>单元格</td>
                    <td>单元格</td>
                </tr>
                <tr>
                    <td>单元格</td>
                    <td>单元格</td>
                    <td>单元格</td>
                </tr>
            </table>
        </section>
        <section>
            <h2>表单元素</h2>
            <form action="http://www.bing.com/search" method="get">
                <label>Bing: <input type="search" name="q"></label> <input type="submit" value="Search...">
            </form>
            <form action="https://www.douban.com/search" method="get">
                <label>douban <input type="search" name="q"></label> <input type="submit" value="Search...">
            </form>

        </section>
    </main>
    <footer>页脚</footer>
</body>

</html>
